<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="$router.back()" />

    </header>
    <main class="content">
      <van-empty v-if="store.cartList.length==0" image-size="100" description="购物车空" />
      <van-swipe-cell v-else v-for="item in store.cartList" :key="item.id" style="background-color: white;">
        <van-card :num="item.count" :price="item.price"  :title="item.title" class="goods-card"  >
          <template #thumb lazy>
            <img lazy style="width: 100%;" :src="item.image" alt="">
        </template>
        <template #tag>
          <van-checkbox v-model="item.checked"></van-checkbox>
        </template>
        <template #footer>
          <van-stepper v-model="item.count" @click="fangDou" disable-input />
        </template>
          </van-card>
        <template #right>
          <van-button square text="删除" type="danger" @click="onDete(item.id)" class="delete-button" />
        </template>
        <van-count-down :time="time" />
      </van-swipe-cell>
    </main>
  </div>
  <footer>
    <van-submit-bar :price="store.totalPrice * 100" button-text="结算" @submit="onSubmit"  @click="$router.push('/order')">
      <van-checkbox v-model="allChecked">全选</van-checkbox>

    </van-submit-bar>
  </footer>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed,ref } from 'vue';
const time = ref(  (60 % 1000)/24);
import shake from '@/tool/shake';
const store = useCounterStore()
const allChecked = computed({
  get() {
    if (store.cartList.length == 0) {
      return false
    } else {
      return store.cartList.every(item => item.checked == true)
    }
  },
  set(newValues) {
    store.cartList.forEach(item => item.checked = newValues)
  }
})
// 
const onDete=(id)=>{
  store.delel(id)
}
const fangDou=(count)=>{
  shake(fangDou(count))
}
const onSubmit=()=>{
  shake(onSubmit)
}
</script>

<style lang="scss" scoped></style>